// 引入基类接口
import Base from "../base.js"
// 引入影院api
import cinemasApi from "../../api/cinemas.js";

export default class extends Base {
  // 设置this.data
  constructor(props) {
    super(props);
    this.data = {
      _id: props._id,
    }
  }


  render() {


    this.$el.html(`
    <h1 style="margin:20px auto;width:140px;font-weight:bold;">修改影院</h1>
    <form class="layui-form" style="width:513px;flex-flow:wrap;margin:auto;border: groove;padding:50px 100px;">
      <div class="layui-form-item">
        <label class="layui-form-label">影院名</label>
        <div class="layui-input-block">
            <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label" style="padding: 9px 0;">影院地址</label>
        <div class="layui-input-block">
          <input type="text" name="address" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label" style="padding: 9px 0;">联系方式</label>
        <div class="layui-input-block">
          <input type="text" name="phone" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" id="status">
        <label class="layui-form-label" style="padding: 9px 0;height:38px;">是否营业</label>
        <div class="layui-input-block">
          <input type="radio" name="status"  value="false" title="否" id="false" lay-filter="ChoiceRadio">
          <input type="radio" name="status"  value="true"  title="是" id="true" lay-filter="ChoiceRadio">
        </div>
      </div>
      <div style="margin: auto;width: 202px;">
        <div>
          <input type="button" value="保存修改" id="changeBtn" class="layui-btn">
          <input type="button" value="修改图片" id="upload" class="layui-btn">
        </div>
      </div>
    </form> 
      `
    )
    //获取input元素
    this.$nameInputELe = $("[name='name']")
    this.$addressInputELe = $("[name='address']")
    this.$phoneInputELe = $("[name='phone']")
    //获取status容器
    this.$statusELe = $("#status")
    console.log(this.$statusELe);
    //获取按钮元素
    this.$changBtnEle = $("#changeBtn")
    this.$uploadBtnele = $("#upload")


  }

  //提交修改数据
  async saveChange() {
    //获取最新的数据
    const name = this.$nameInputELe.val();
    const phone = this.$phoneInputELe.val();
    const address = this.$addressInputELe.val();
    const status = this.data.status;
    const _id = this.data._id;
    console.log({ name, phone, address, status, _id });
    //向数据服务器发送请求
    const data = await cinemasApi.change({ name, phone, address, status, _id });
    console.log(data);
    if (data) {
      layer.msg(`修改数据成功`)
      location.hash="#/info/cinemas";
    }
  }

  upload() {
    //获取电影id通过url携带跳转路径
    //上传图片到数据库
  
      location.hash = `#/info/upload/${this.data._id}`;
  
  }

  rerender() {
    //拿到数据解构
    const { name, address, phone, status } = this.data;
    //将数据渲染到对应表格
    this.$nameInputELe.val(name);
    this.$addressInputELe.val(address);
    this.$phoneInputELe.val(phone);
    // 将获取的数据渲染到对应单元格
    if (status) {
        console.log("in");
        $("input[name=status]:eq(1)").attr("checked", true)
    } else {
        $("input[name=status]:eq(0)").attr("checked", true)
    };

  }
  // 单选框监听事件
  radioHandel() {
    const layer = layui.layer, $ = layui.jquery, form = layui.form;
    const that = this;
    form.on('radio(ChoiceRadio)', function (data) {
      console.log(data.value);
      const status = data.value;
      that.data["status"] = status;
      console.log(that.data);
    });
  }


  //获取_id对应的影院
  async getOne() {
    const { _id } = this.data;
    this.data = await cinemasApi.getOne(_id);
    console.log(this.data);
  }


  async mounted() {
    await this.getOne();
    this.rerender();
    const form = layui.form;
    form.render();
  }

  // 绑定事件代理
  handle() {
     //给保存按钮添加事件
     this.$changBtnEle.on("click", this.saveChange.bind(this))
     //给上传按钮添加事件
     this.$uploadBtnele.on("click", this.upload.bind(this))
    // 单选框改变
    this.radioHandel();
}

}
